<template>
  <div>
    <!--<v-topbarback text="商品评价"></v-topbarback>-->
    <div class="content tl">
      <div class="comment">
        <!--<div class="clearfix p15-10 mt10  bdb">-->
          <!--<span class="cline-l">商品评价 ({{total}})</span>-->
        <!--</div>-->
        <scroller style="top: 0" :on-refresh="refresh" :on-infinite="infinite" :noDataText="no" ref="my_scroller" v-if="list.length>0">
        <ul class="comm-list ">
          <li v-for="item in list">
            <div class="comm-top">
              <span class="star-wrap">
               {{showStar(item.goods_evaluation)}}
              </span>  <span class="comm-uname" v-if="item.anonymous">{{item.buyer_name}}</span> <span class="comm-uname" v-if="!item.anonymous">{{item.buyer_name  | hideName}}</span>
            </div>
            <div class="comm-con">{{item.comment}}</div>

            <!--<div class="comm-pro-desc">规格：{{item.specification}}</div>-->
            <span class="comm-time">发布于{{item.evaluation_time | formatDate}}</span>
          </li>
        </ul>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import topbarback1 from '@/components/topbarback/topbarback'
//  import getuser from '@/util/getuser'
  import config from '@/config/config'
  import {formatDate} from '@/util/util.js';
  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  export default {
    components: {
//      'v-topbarback': topbarback1,
    },
    data(){
      return {

        row: 30,
        req: true,
        pageNum: 1,
        list: [],
        dataList: [],
        picUrl: config.picBaseUrl,
        no:' ',
        total:0
      };
    },
    mounted(){
      this.getList(1)
    },
    methods: {
      showStar(n){
        var str=''
        for(var i=0;i<n; i++){
          str+='★'
        }
        return str;
      },
      refresh (done) {
        this.list.length = 0;
        this.getList( 1);
        done()
      },
      infinite(done) {
        setTimeout(() => {
          if (this.dataList.length < this.row) {
            done(true)
            return;
          } else {
            if (this.req == false) {
              this.pageNum++;
              this.getList(this.pageNum)
            }
            done()
          }
        }, 1500)
      },
      getList(page){
        this.$http.get(config.baseUrl + '/goods/comment', {
            params: {
            page: page,
            row: this.row,
            goodsId: this.$route.query.id
          }
        }, {
          headers: {},
          credientials: true,
          emulateJSON: true
        }).then(function (response) {
          if (response.data.code == 200) {
            var data = response.data;
            this.total = data.total
            this.dataList = data.list
            this.list = this.list.concat(this.dataList)
          }
          setTimeout(() => {
            this.req = false
          }, 3000)
        });
      }
    },
    filters: {
      hideName(val){
        if (val) {
          if (val.length <= 2) {
            return val.substring(0, 1) + '**'
          } else {
            return val.substring(0, 1) + '**' + val.substring(val.length - 1);
          }

        } else {
          return '';
        }
      },
      formatDate(time) {
          if(time){
            return formatDate(time * 1000);
          }
      },
    },
  }
</script>


<style scoped>
  .shop-map a{ color:#666; }
  .swipe-box{
    background:#fff;
  }
  .swipe-wrap{
    width:100%;
    height:15rem;
    background-color:#fff;
    overflow:hidden;
  }
  .mint-swipe-items-wrap img{
    width:100%;
    height:100%;
  }
  .p15{
    padding:.75rem;
  }
  .p15-10{
    padding:.5rem .75rem;
  }
  .mt10{ margin-top:.5rem; }
  .bgf{
    background:#fff;
  }
  .g-title{
    font-size:.8rem;
    line-height:1.5;
    color:#222;
  }
  .g-price{
    font-size:.8rem;
    line-height:1.5;
    color:#e80013;
    padding:.4rem 0;
  }
  .yj{
    font-size:.7rem;
    color:#666;
    float:left;
  }
  .xl{
    float:right;
    font-size:.7rem;
    color:#666;
  }
  .cline-l{
    float:left;
    font-size:.7rem;
    color:#222;
  }
  .cline-r{
    float:right;
    font-size:.7rem;
    color:#666;
  }
  .bdb{ border-bottom:1px solid #d5d5d5 }
  .comm-menu{
    margin:.5rem .75rem;
  }
  .comm-menu li{
    width:25%;
    float:left;
    text-align:center;
    color:#222;
    font-size:.7rem;
    line-height:2rem;
  }
  .comm-menu li.active{
    color:#e80013;
  }
  .wntj-list{
    /*display:flex;*/
    /*justify-content:space-around;*/
    /*flex-direction:row;*/
    /*flex-wrap:wrap;*/
    padding:0px 5px;
    margin-bottom:.5rem;
    overflow:hidden;
  }
  .wntj-list li{
    float:left;
    background:#fff;
    padding:8px;
    border-radius:4px;
    width:calc(50% - 3px);
    height:13rem;
    margin-top:6px;
    position:relative;
  }
  .wntj-list li:nth-child(even){
    float:right;
  }
  .pro-img{
    width:100%;
    height:8.5rem;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .pro-img img{
    max-height:100%;
    max-width:100%;
  }
  .pro-desc{
    height:1.8rem;
    overflow:hidden;
    font-size:.65rem;
    color:#222222;
  }
  .price-wrap{
    margin-top:.5rem;
    display:flex;
    align-items:center;
  }
  .price1{
    font-size:.7rem;
    color:#e80013;
    flex:1;
    line-height:1;
  }
  .cart{
    width:1.1rem;
    display:inline-block;
  }
  .del{
    color:#666;
    font-size:.6rem;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .comm-list{
    /*padding:.5rem;*/
    /*background: #fff;*/
    overflow:hidden;
  }
  .comm-list li{
    padding:0 .75rem 0.5rem;
    margin:.5rem 0;
    background: #fff;
    /*border-bottom:1px solid #d5d5d5;*/
  }
  .comm-list li:last-child{
    border-bottom:none;
  }
  .comm-top{
    font-size:.6rem;
    color:#666;
    line-height:2rem;
    border-bottom:1px solid #F7F7F7;
  }
  .star-wrap img{
    margin-right:.1rem;
  }
  .star-wrap{
    font-size:.7rem;
    color: #e80013;
    letter-spacing:1px;
    float:right;
  }
  .comm-time{
    font-size:.5rem;
    color: #999999;
  }
  .comm-uname{
    /*float:left;*/
  }
  .comm-con{
    font-size:.7rem;
    color:#333;
    padding:.5rem 0;
    line-height:1.5;
  }
  .comm-img img{
    width:60px;
    height:60px;
    margin-right:.3rem;
    border-radius:4px;
  }
  .comm-pro-desc{
    font-size:.6rem;
    color:#666;
    padding:.4rem 0;
  }
  .show-all{
    padding:.5rem .75rem;
  }
  .show-all span{
    display:block;
    padding:.3rem .75rem;
    border-radius:5px;
    border:1px solid #d5d5d5;
    text-align:center;
    font-size:.7rem;
    color:#666;
  }
  .show-info{
    padding:.75rem;
  }
  .shop-info-top{
    padding-bottom:.5rem;
    border-bottom:1px solid #d5d5d5;
    overflow:hidden;
  }
  .shop-info-top > img{
    width:72px;
    height:72px;
    border-radius:4px;
    float:left;
  }
  .shop-det{ overflow:hidden; padding-left:.5rem; }
  .shop-name{
    font-size:.7rem;
    color:#222222;
  }
  .show-xingyong{
    font-size:.6rem;
    color:#666666;
    margin:.2rem 0;
  }
  .show-xingyong b{
    color:#e80013;
  }
  .show-xingyong span:last-child{
    margin-left:.5rem;
  }
  .show-xingyong img{
    margin-right:.2rem;
  }
  .shop-map{
    font-size:.6rem;
    color:#666666;
  }
  .shop-map img{
    margin-right:.2rem;
    vertical-align:middle;
  }
  .shop-link{
    padding-top:.65rem;
  }
  .shop-link span{
    display:inline-block;
    width:49%;
    border:1px solid #d5d5d5;
    border-radius:3px;
    text-align:center;
    color:#222;
    font-size:.7rem;
    padding:.3rem 0;
  }
  .shop-link span img{
    width:.8rem;
    margin-right:.5rem;
    vertical-align:middle;
  }
  .details-title{
    height:2.5rem;
    line-height:2.5rem;
    position:relative;
    text-align:center;
  }
  .details-title span{
    color:#222;
    font-size:.8rem;
    background:#fff;
    display:inline-block;
    padding:0 10px;
    position:relative;
    z-index:2;
  }

  .mb-50{ margin-bottom:2.5rem; }

.tl{ text-align:left;}

</style>
